<template>
    <div class="comparative-container">
        <nav-bar title="考试试卷对比分析"></nav-bar>

        <div class="contrast-table-content">
            <p class="title">
                试卷对比分析表
                <span>（得分/满分（答对题数/总题数） 正确率）</span>
            </p>
            <div class="table-content">
                <table :style="{ width: examInfo.length * 120+100 + 'px' }">
                    <tr>
                        <td style="width:85px">题型</td>
                        <td v-for="(item,index) in examInfo" :key="index">{{item.examName}}</td>
                    </tr>
                    <tr v-for="(value,key) in typeData" :key="key">
                        <td style="width:85px">{{typeName[key]}}</td>
                        <td
                            v-for="(item,i) in value"
                            :key="i"
                        >{{item.answerScore || 0}}/{{item.totalScore || 0}} （{{item.answerRight || 0}}/{{item.total || 0}}）{{ Math.floor(item.scoreRate * 10000) / 100 || 0}}%</td>
                    </tr>
                </table>

                <table>
                    <tr>
                        <td style="width:85px">难度</td>
                        <td v-for="(item,index) in examInfo" :key="index">{{item.examName}}</td>
                    </tr>
                    <tr v-for="(value,key) in difficultyData" :key="key">
                        <td style="width:85px">{{key}}</td>
                        <td
                            v-for="(item,i) in value"
                            :key="i"
                        >{{item.answerScore || 0}}/{{item.totalScore || 0}} （{{item.answerRight || 0}}/{{item.total || 0}}）{{ Math.floor(item.scoreRate * 10000) / 100 || 0}}%</td>
                    </tr>
                </table>
            </div>
            <p class="chart-name">题型折线图</p>
            <canvas id="typeChart" height="300"></canvas>
            <p class="chart-name">难度折线图</p>
            <canvas id="difficultyChart" height="300"></canvas>
        </div>
    </div>
</template>
<script>
import F2 from "@antv/f2";
export default {
    name: "comparative",
    components: {},
    data() {
        return {
            loading: false,
            examInfo: [],
            typeData: {},
            difficultyData: [],
            ids: [],
            typeName: {
                TypeA1: "A1题",
                TypeA2: "A2题",
                TypeA3: "A3题",
                TypeA4: "A4题",
                TypeB1: "B1题",
                TypeM1: "M1题",
                TypeSingleChoice: "单选题",
                TypeMultipleChoice: "多选题",
                TypeJudge: "判断题",
                TypeSort: "排序题",
                TypeEssay: "填空题",
                TypeFlow: "系列题",
                TypeWork: "应用题",
                TypeSubjective: "主观题",
                TypeExplanation: "名词解释题",
            },
        };
    },
    mounted() {
        this.ids = this.$route.query.examId.split(",");
        this.getData();
    },
    methods: {
        getData() {
            var promises = [];
            if (this.$route.query.type == 1) {
                promises = this.ids.map((item, index) => {
                    return this.getExamAnalysis(item);
                });
                this.promises(promises);
            } else {
                promises = this.ids.map((item, index) => {
                    return this.getTrainAnalysis(item);
                });
                this.promises(promises);
            }
        },
        promises(promises) {
            Promise.all(promises)
                .then(() => {
                    var obj = {};
                    this.examInfo.forEach((element, index) => {
                        element.questionTypeScoreRates.forEach(item => {
                            obj[item.questionType]
                                ? ""
                                : (obj[item.questionType] = new Array(this.examInfo.length).fill(
                                      {},
                                  ));
                            obj[item.questionType][index] = item;
                        });
                    });
                    this.typeData = obj;
                    var chart = [];
                    Object.keys(obj).forEach(key => {
                        obj[key].forEach((element, index) => {
                            let item = {
                                value: (element.scoreRate || 0) * 100,
                                type: this.typeName[key],
                                name: this.examInfo[index].examName + index,
                            };
                            chart.push(item);
                        });
                    });
                    this.draw(chart, "typeChart");
                    var obj = {};
                    this.examInfo.forEach((element, index) => {
                        element.questionDifficultyScoreRates.forEach(item => {
                            obj[item.difficultyName]
                                ? ""
                                : (obj[item.difficultyName] = new Array(this.examInfo.length).fill(
                                      {},
                                  ));
                            obj[item.difficultyName][index] = item;
                        });
                    });
                    this.difficultyData = obj;
                    var chart = [];

                    Object.keys(obj).forEach(key => {
                        obj[key].forEach((element, index) => {
                            let item = {
                                value: (element.scoreRate || 0) * 100,
                                type: key,
                                name: this.examInfo[index].examName + index,
                            };
                            chart.push(item);
                        });
                    });
                    console.log(chart);
                    this.draw(chart, "difficultyChart");
                })
                .catch(e => {
                    console.log(e);
                });
        },
        draw(data, id) {
            const chart = new F2.Chart({
                id: id,
                pixelRatio: window.devicePixelRatio,
            });
            chart.source(data);
            // chart.scale("type", {
            //     type: "timeCat",
            //     tickCount: 3,
            // });
            // chart.scale("value", {
            //     tickCount: 5,
            // });
            chart.legend({
                // itemFormatter(val) {
                //     return val + "%"; // val 为每个图例项的文本值
                // },
                nameStyle: {
                    fill: "#fff", // 文本的颜色
                },
                valueStyle: {
                    fill: "#fff", // 文本的颜色
                },
            });
            chart.axis("value", {
                label: {
                    fill: "#fff",
                },
            });
            chart.axis("type", {
                labelOffset: 10,
                tickLine: {
                    lineWidth: 1,
                    stroke: "#ccc",
                    length: 5, // 刻度线长度
                },
                label: {
                    rotate: id === "typeChart" ? -Math.PI / 5 : 0,
                    textAlign: "end",
                    textBaseline: "middle",
                    fill: "#fff",
                },
            });
            chart.tooltip({
                custom: true, // 自定义 tooltip 内容框
                crosshairsStyle: {
                    stroke: "rgba(255, 255, 255, 0.25)",
                    lineWidth: 2,
                },
                onChange: function onChange(obj) {
                    const legend = chart.get("legendController").legends.top[0];
                    const tooltipItems = obj.items;
                    const legendItems = legend.items;
                    const map = {};
                    legendItems.forEach(function(item) {
                        map[item.name] = JSON.parse(JSON.stringify(item));
                    });
                    tooltipItems.forEach(function(item) {
                        const name = item.name;
                        const value = item.value;
                        if (map[name]) {
                            map[name].value = value;
                        }
                    });
                    //console.log(map);
                    var arr = [];
                    Object.keys(map).forEach(function(key) {
                        //console.log(key, map[key]);
                        arr.push(map[key]);
                    });
                    legend.setItems(arr);
                },
                onHide: function onHide() {
                    const legend = chart.get("legendController").legends.top[0];
                    legend.setItems(chart.getLegendItems().country);
                },
            });
            chart
                .line()
                .position("type*value")
                .color("name");
            chart.render();
        },
        getTrainAnalysis(id) {
            return this.$APIs
                .getTrainAnalysis({
                    examId: id,
                })
                .then(data => {
                    this.examInfo.push(data);
                });
        },
        getExamAnalysis(id) {
            return this.$APIs
                .getExamAnalysis({
                    examId: id,
                })
                .then(data => {
                    this.examInfo.push(data);
                });
        },
    },
};
</script>

<style lang="scss">
.comparative-container {
    display: flex;
    flex-direction: column;
    height: 100%;

    .contrast-table-content {
        flex: 1;
        overflow-y: scroll;
        padding: 15px;
    }
    td {
        border: 1px solid #2d2c3c;
        text-align: center;
        font-size: 12px;
        padding: 7px 0;
    }
    tr:nth-child(odd) {
        color: #fff;

        background: rgba(86, 186, 202, 0.05);
    }
    tr:nth-child(even) {
        color: #fff;
    }
    table {
        border-collapse: collapse;
        text-align: center;
        min-width: 100%;
        margin-bottom: 20px;
    }
    .table {
        tr:nth-child(odd) {
            color: #56baca;

            background: rgba(86, 186, 202, 0.05);
        }
        tr:nth-child(even) {
            color: #fff;
        }
    }
    .title {
        font-size: 16px;
        margin-bottom: 15px;
        span {
            font-size: 12px;
        }
    }
    .table-content {
        overflow-x: scroll;
        td {
            width: 100px;
        }
    }
    .chart-name {
        font-size: 12px;
        font-weight: bold;
        color: #56baca;
    }
}
</style>
